<template>
  <div class="month-hour">
    <div class="topbox">
        <el-form ref="form" label-position="left" label-width="40px">
            <el-row :gutter="20">
                <el-col :span="5">
                  <el-form-item label="企业">
                    <FilterSelect2
                        v-model="formdata.companyId"
                        :optionlist="xitonglist"
                        @changeSelect="changeqiye"
                        :valuekey="{ name: 'name', value: 'id' }"
                      ></FilterSelect2>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="日期">
                        <el-date-picker
                          size="small"
                          v-model="formdata.value"
                          format="yyyy-MM-dd"
                          value-format="yyyyMMdd"
                          style="width:100%"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="部门">
                    <el-select v-model="formdata.departmentId" clearable  style="width:100%" placeholder="请选择" size="small" @change="changebu">
                      <el-option
                        v-for="item in bumenlist"
                        :key="item.departmentId"
                        :label="item.departmentName"
                        :value="item.departmentId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="班组">
                    <el-select v-model="formdata.teamId" clearable  style="width:100%"  placeholder="请选择" size="small">
                      <el-option
                        v-for="item in banzulist"
                        :key="item.teamId"
                        :label="item.teamName"
                        :value="item.teamId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="4" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small" @click="chongzhi">重 置</el-button>
                    <el-button size="small" type="primary" @click="getlist(false)">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
      <div class="neis">
        <TopTitle @command="command" @daochu="daochu" @shuaxin="getlist(true)" />
        <div class="table">
          <el-table
            :size="iissize"
            border
            :header-cell-style="{ 'text-align': 'center', background: '#f5f5f5' }"
            v-loading="loading"
            height="calc(100% - 1px)"
            style="width: 100%"
            ref="tabledataref"
            :data="tableData"
          > 
            <el-table-column label="序号" type="index" fixed width="50"/>
            <el-table-column label="企业" prop="companyName" fixed min-width="120"/>
            <el-table-column label="部门" prop="departmentName" fixed min-width="120"/>
            <el-table-column label="班组" prop="teamName" fixed min-width="120"/>
            <el-table-column label="日期" prop="dayDate" fixed min-width="120"/>
            <el-table-column v-for="col in tableConfig" 
              :key="col.prop"  
              :label="col.label"  min-width="100" >
              <template #default="{ row }">
                <el-tooltip placement="top">
                  <template #content>
                    <div>预算电量(kWh)</div>
                    <!-- 显示预算电量 -->
                    <div>{{ row.hourDataObj[col.prop].budgetEnergy }}</div>
                  </template>
                  <!-- 显示实际电量，并根据超额标识设置颜色 -->
                  <div :style="{color: row.hourDataObj[col.prop].excessFlag ? 'red' : 'green'}">
                    {{ row.hourDataObj[col.prop].actualEnergy }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fenye">
          <el-pagination
              background
              layout="prev, pager, next"
              :current-page.sync="pageNo"
              @current-change="getlist(true)"
              :page-size="15"
              :total="total"
            >
          </el-pagination>
        </div>
      </div>
  </div>
</template>
<script>
import TableColumn from '@/components/Table/index.vue'
import dayjs from 'dayjs'
import { getCompanyListApi } from '@/api/energy-consumption/Equipment-energy/Energy-analysis'
import TopTooltip from '@/components/TopTitle/newtitle.vue'
import { exportexcel } from '@/utils/excel'
import {getTeamListapi,getTeamHourapi} from '@/api/energy-consumption/demand/limit-warning'
export default {
  name: 'CallPoliceMonthMonth',
  components: {
    TopTooltip,
    TableColumn
  },
  data() {
    return {
      pageNo:0,
      total:0,
      formdata:{},
      iissize: 'medium',
      xitonglist:[],
      tableData:[],
      tableConfig:[],
      bumenlist:[],
      banzulist:[],
      loading:false
    };
  },

  async mounted() {
    const {data:{list}}=await getCompanyListApi()
    this.xitonglist=list
    this.formdata={value:[dayjs().format('YYYYMM')+'01',dayjs().format('YYYYMMDD')],departmentId:'',teamId:''}
    const companyId = localStorage.getItem('companyId')
    this.$set(this.formdata,'companyId',companyId?+companyId:list[0].id)
    const {data:{list:array}}=await getTeamListapi({companyId:this.formdata.companyId})
    this.bumenlist=array
    console.log(array);
    
    
    this.getlist()

  },

  methods: {
    // 获取表格数据
    async getlist(flag){
      this.loading=true
      let pageNo=0
      if(flag){
        pageNo=this.pageNo==0?0:this.pageNo-1
      }else{
        pageNo=this.pageNo=0
      }
      const {companyId,teamId,departmentId,value} =this.formdata
      const {data:{list,totalCount}}=await getTeamHourapi({
        pageNo,pageSize:15,companyId,
        dayDateStart:value[0],dayDateEnd:value[1],
        teamId,departmentId
      })
      this.total=totalCount
      this.tableConfig=[]
      this.tableConfig = list[0]?.hourData.map(hourItem => {
        const hour = hourItem.hour.toString(); // 小时数作为 label 和 prop
        return {
          label: hour,
          prop: hour
        };
      });
      this.tableData = list.map(company => {
        const hourDataObj = company.hourData.reduce((acc, hourItem) => {
          acc[hourItem.hour] = hourItem;
          return acc;
        }, {});
        return {
          ...company,
          hourDataObj 
        };
      });
      
      this.loading=false
    },
    // 部门下拉
    changebu(val){
      this.$set(this.formdata,'teamId','')
      this.banzulist=this.bumenlist.find(ele=>ele.departmentId==val).teamVOList
    },
    changeqiye(val){
      localStorage.setItem('companyId', val)
    },
    // 导出
    daochu(){
      const pageNo=this.pageNo-1
      const {companyId,teamId,departmentId,value} =this.formdata
      exportexcel(
        '/ecm-microservice-biz/ecm/pre/actual/management/hour/exportExcel',
        {
          pageNo,pageSize:15,companyId,
          dayDateStart:value[0],dayDateEnd:value[1],
          teamId,departmentId
        },'小时超额预警'
      )
    },
    // 重置
    chongzhi(){
      this.formdata={value:[dayjs().format('YYYYMM')+'01',dayjs().format('YYYYMMDD')],departmentId:'',teamId:''}
      const companyId = localStorage.getItem('companyId')
      this.$set(this.formdata,'companyId',companyId?+companyId:list[0].id)
      this.getlist()
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
  },
};
</script>
<style lang="scss" scoped>
.month-hour{
  height: 100%;
  .topbox{
    height: 80px;
    margin-bottom: 10px;
    padding: 20px;
    background-color: #fff;
  }
  .neis{
    background-color: #fff;
    padding: 20px;
    height: calc(100% - 90px);
    .table{
      height: 88%;
    }
    .fenye{
       text-align: right;
       margin-top: 10px;
    }
  }
}
</style>